<template>
    <div class="myHeader" :style="{
        background: $store.state.backColor
    }">
        <span class="side"></span><span>学习笔记本</span><span class="side" @click="showMask">菜单</span>
    </div>
</template>

<script>
export default {
    props: {
        show: Boolean
    },
    methods:{
        showMask() {
            this.$emit('update:show', !this.show)
            this.$bus.$emit('sendcolors', false)
        }
    },
 }
</script>

<style scoped lang="scss">
    .myHeader {
        width: 100%;
        height: 60px;
        font-size: 30px;
        font-weight: bold;
        color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        .side {
            font-size: 20px;
            width: 40px;
        }
    }
</style>